<template>
  <div class="article-list">
    <!-- 下拉刷新组件 -->
    <!-- v-model表示是否处于下拉中 -->
    <!-- refresh 只要下拉就回触发 -->
    <van-pull-refresh v-model="isLoading"
                      :success-text="successText"
                      @refresh="onRefresh">
      <!-- van-list 列表组件 -->
      <!-- 
      属性： 
        v-model 绑定的变量表示是否处于加载中  变量数据值初始为false
        finished 表示所有数据加载全部完成，不能再滚动加载了
        finished-text 所有加载完成结束后的文字
      事件：
        load事件  加载数据事件，这个事件页面一打开就会自动执行，
        直到页面内容铺满为止； 页面滚动到了底部会再次触发load事件
          // 1. 请求数据
          // 2. 将数据追加到列表（一定是追加,这样才能铺满）
          // 3. 关闭加载中 loading = false
          // 4. 判断数据是否全部加载完成 如果全部加载完成 finished=true

        直到 finished 属性为true，那么滚动到底部就不会再触发
     -->
      <van-list v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                :error.sync="error"
                error-text="请求失败，点击重新加载"
                @load="onLoad">
        <!-- 列表项组件 -->
        <article-item :article="item"
                      v-for="(item,index) in list"
                      :key="index"></article-item>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { getArticles } from '@/api/article'
import ArticleItem from './article-item.vue'
export default {
  name: 'ArticleList',
  components: {ArticleItem},
  props: {
    // 频道信息，传入频道数据用于将来获取列表数据
    channel: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      list: [],  // 数据列表
      loading: false,  // 是否加载中
      finished: false, // 是否结束
      timestamp: Date.now(),  // 时间戳，用于分页
      error:false, // 是否出错
      isLoading:false, // 下拉刷新
      successText:''   // 刷新成功提示
    }
  },
  methods: {
    async onLoad() {
      try {
        // if(Math.random()*10 > 5){
        //   console.log(aaaaa);
        // }
        // 1.请求数据
        const {data:res} = await getArticles({
          channel_id:this.channel.id, // 频道ID
          timestamp:this.timestamp, // 时间戳
          with_top:0  // 是否包含置顶
        })
        
        // 2.追加数据到列表
        this.timestamp = res.data.pre_timestamp  // 改变页码
        this.list.push(...res.data.results)  // 解构开
        // 3.关闭加载中
        this.loading = false
        // 4.判断是否结束
        if(res.data.results.length<10){
          this.finished = true
        }
      } catch (error) {
        this.error = true
        this.loading = false
        console.log(error);
        this.$toast.fail('获取文章列表数据失败')
      }
    },
    async onRefresh(){
      console.log('下拉刷新中');
      //思路：  获取最新的数据放入到列表的顶部
       try {
          // 1.请求数据
          const {data:res} = await getArticles({
            channel_id:this.channel.id, // 频道ID
            timestamp:Date.now(), // 时间戳
            with_top:0  // 是否包含置顶
          })
          // 2. 放入列表顶部
          this.list.unshift(...res.data.results)
          // 设置成功提示文字
          this.successText = `刷新了${res.data.results.length}条数据`
       } catch (error) {
         console.log(error);
         this.$toast.fail('刷新失败，请重试')
       }
       // 3.关闭下拉中（无论成功失败）
       this.isLoading = false
    }
  }
}
</script>

<style scoped lang="less">
.article-list{
  overflow-y: scroll;
  height: 79vh;
}
</style>